<template>
    <!-- <a-button type="primary" style="margin-right: 10px" @click="toSSML"
        >生产ssml</a-button
    > -->
    <a-popover
        v-model:open="visible"
        title="插入静音"
        @openChange="handleClick"
        trigger="click"
    >
        <template #content>
            <div>
                <a-button
                    v-for="(item, index) in shopList"
                    :key="index"
                    type="dashed"
                    style="margin-right: 10px; margin-bottom: 10px"
                    @click="handleSubmit(item.value)"
                >
                    {{ item.label }}
                </a-button>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-input-number
                            v-model:value="stopValue"
                            min="50"
                            max="10000"
                            addon-before="自定义"
                            addon-after="ms"
                        >
                        </a-input-number>
                    </a-col>
                    <a-col :span="8">
                        <a-button
                            type="primary"
                            @click="handleSubmit(stopValue)"
                        >
                            确定
                        </a-button>
                    </a-col>
                </a-row>
                <div></div>
            </div>
        </template>
        <a-button type="primary"> 插入静音 </a-button>
    </a-popover>
</template>

<script setup>
import { ref, watch } from "vue";
import MuteFn from "./mute-fn.js"; // 确保路径正确，且mute-fn.js是JavaScript文件
import { serializeToSSML } from "../../utils/serialize-microsoft.js";
const fn = ref(null);
const shopList = ref([
    {
        label: "200ms",
        value: 200,
    },
    {
        label: "300ms",
        value: 300,
    },
    {
        label: "500ms",
        value: 500,
    },
    {
        label: "1000ms",
        value: 1000,
    },
]);

const editorRef = ref();
const onOpen = (editor) => {
    if (!fn.value && editor) {
        // console.log('onOpen')
        fn.value = new MuteFn(editor);
        editorRef.value = editor;
    }
};
const visible = ref(false);
const stopValue = ref(1500);
async function handleClick(status) {
    console.log("handleClick:", status);
    if (!status) return;
    if (fn.value.isDisabled()) {
        visible.value = false;
        return;
    }
}

function handleSubmit(text) {
    console.log("handleSubmit", text, fn.value);
    fn.value?.exec({ value: text, label: text + "ms" });
    visible.value = false;
}
function toSSML(params) {
    console.log(editorRef.value.getText());
    console.log(editorRef.value.getHtml());
    console.log(serializeToSSML(editorRef.value));
}

const props = defineProps({
    editor: {
        type: Object,
        default: null,
    },
});

watch(
    () => props.editor,
    (val) => {
        // console.log("props.editor", props.editor);
        onOpen(props.editor);
    },
    { immediate: true, deep: true }
);
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
    onOpen,
});
</script>

<style scoped>
/* Your SCSS styles here */
</style>
